<!-- $lib/components/Menu/Common/MenuSnippet.svelte -->
<script lang="ts">
	import type { Option } from '$lib/components/Basic/Popover/types';
	import MenuCollapseItem from './MenuCollapseItem.svelte';
	import MenuLeafItem from './MenuLeafItem.svelte';

	// 确保 level 始终为 number 类型（提供默认值避免 undefined）
	export let items: Option[] = [];
	export let level: number = 1; // 显式声明为 number 并提供默认值 1
	export let label: string = 'label';
	export let selectedLeafId: string | number | null = null; // 补充默认值
	export let onItemClick: (item: Option, e: MouseEvent) => void = () => {};
	export let isCollapsed: boolean = false;
</script>

<ul class="menu-list">
	{#each items as item}
		{#key item.id}
			{#if item.children && item.children.length > 0}
				<MenuCollapseItem 
					{item} 
					{level} 
					{label} 
					{selectedLeafId} 
					{onItemClick} 
				/>
			{:else}
				<MenuLeafItem 
					{item} 
					{level} 
					{label} 
					{selectedLeafId} 
					{onItemClick} 
					isCollapsed={isCollapsed} 
				/>
			{/if}
		{/key}
	{/each}
</ul>

<style scoped lang="scss">
	.menu-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}
</style>